<script src="js/bootstrap.min.js"></script>

<div class="jumbotroon">
    <div class="container">
        <div class="row">
            <div id="main-editor" class="col-lg-12">
                <div id="frame">
                    <div id="title-bar"  >
                        <button id="copy-button" onclick="copy()" > </button>
                        <button id="cut-button" onclick="cut()" > </button>
                        <button id="paste-button" onclick="paste()" > </button>
                        <button id="undo-button" onclick="document.execCommand('undo',false,'');" > </button>
                        <button id="redo-button" onclick="document.execCommand('redo',false,'');" > </button>
                    </div>
                    <div id="work-area" contenteditable="true" spellcheck="true"></div>
                    <div id="task-bar"  >
                        <div id="font-menu">
                            <div id="f-selector">
                                <select id="fs" onchange="document.execCommand('fontName',false,this[this.selectedIndex].value);" style="width: 363px; height: 32px; margin-top: 2px;margin-left:382px;">
                                    <option >Calibri</option>
                                    <option >BOINK LET</option>
                                    <option >Times New Roman</option>
                                </select>
                                <select id="ts" onchange="document.execCommand('fontSize',false,this.value);" style="width: 49px; height: 32px; margin-left: 0px">
                                    <option value="4" >11</option>
                                    <option value="5" >16</option>
                                    <option value="6" >20</option>
                                </select>
                            </div>

                            <div id="f-style">
                                <button id="bold-button" onclick="applyBold()"> </button>
                                <button id="italic-button" onclick="applyItalic();" > </button>
                                <button id="underline-button" onclick="applyUnderline();" > </button>
                            </div>

                            <div id="paragraph-menu">
                                <button id="justifyLeft-button" onclick="alignTo('justifyLeft');"> </button>
                                <button id="justifyCenter-button" onclick="alignTo('justifyCenter');" > </button>
                                <button id="justifyRight-button" onclick="alignTo('justifyRight');" > </button>
                            </div>
                            <div id="f-color">
                                <select id="cs" onchange="document.execCommand('foreColor',false,this.value);" style="width: 18px; height: 23px; margin-left: 258px; margin-top: 12px">
                                    <option value='#000000'>NEGRO</option>
                                    <option value='#FF0000'>ROJO</option>
                                    <option value='#0000FF'>AZUL</option>
                                    <option value='#00FF00'>VERDE</option>
                                </select>
                            </div>
                        </div>
                   </div>
            </div>
        </div>
    </div>
</div>

<!--script type='text/javascript' src="../../../js/jquery-1.11.1.min.js"></script-->
<script type="text/javascript">
    clipboard="";   //Este sería nuestro portapapeles XD
    tutorial="<?php echo $tutorial; ?>";
    step="<?php echo $step; ?>";
    so="<?php echo $_COOKIE['so']; ?>";

    function selectAll(){
        document.getElementById("work-area").focus();
        document.getElementById("work-area").select();
    }

    function showValue(newValue){
        document.getElementById("range").innerHTML=newValue;
    }
</script>

